<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三题</title>
    <style>
        .box1{
            height: 60px;
            width: 120px;
            background-color: green;
        }
        .box2{
            height: 60px;
            width: 120px;
            background-color: rgb(0, 195, 249);
        }
        .box3{
            height: 60px;
            width: 120px;
            background-color: rgb(255, 204, 0);
        }
        .hongse {
            color: red;
            font-size: 50px;
        }

    </style>
</head>
<body>
    <!-- 3. 切换支付方式效果 -->
     <div id="app">
        <div @click="activeIndex=1" :class="wx">微信支付
            <span :class="{'hongse':activeIndex===1    }">√</span>
        </div>
        <div @click="activeIndex=2" :class="zfb">支付宝支付
            <span :class="{'hongse':activeIndex===2    }">√</span>
        </div>
        <div @click="activeIndex=3" :class="yl">银联支付
            <span :class="{'hongse':activeIndex===3    }">√</span>
        </div>
     </div>
</body>
<script src="./vue.js"></script>
<script>
    const{ createApp,ref}=Vue
    createApp({
        setup(){
            let wx = ref('box1')
            let zfb = ref('box2')
            let yl = ref('box3')
            let activeIndex = ref(0)
            return{
                wx,zfb,yl,activeIndex
            }
        }
        

    }).mount('#app')
</script>
</html>